
<template>
  <swiper
      class="swiper-card"
      :indicator-dots="false"
      :autoplay="true"
      :current="currentIndex"
      @change="onSwiperChange"
      previous-margin="80rpx"
      next-margin="80rpx"
      :circular ="true"
  >
    <swiper-item
        v-for="(item, index) in list"
        :key="index"
    >
      <view
          class="swiper-item"
          :class="{ 'active': currentIndex === index }"
          @click="go_detail(index)"
      >
        <image :src="item.image"  />
        <view class="title">
          <view>{{item.title}}</view>
          <view style="color: gray">详情</view>
        </view>
      </view>
    </swiper-item>
  </swiper>
</template>


<script >


export default ({
  name: "CardSwiper",
  props:['list'],
  data() {
    return {
      currentIndex: 0,
    };
  },
  methods: {
    onSwiperChange(e) {
      this.currentIndex = e.detail.current
    },
    go_detail(id) {
      uni.navigateTo({
        url: '/pagesA/index_menu/guide_detail?id=' + id
      })
    },
  }
})
</script>


<style scoped lang="scss">

.swiper-card {
  width: 100%;
  height: 400rpx;
  .swiper-item {
    background-color: white;
    border-radius: 20rpx;
    transition: all 0.3s ease;
    transform: scale(0.9, 0.8);  /* 默认缩小 */

  }

  .swiper-item.active {
    transform: scale(1);  /* 当前卡片放大 */

  }

  .swiper-item image {
    width: 100%;
    height: 300rpx;
    object-fit: cover;
    border-radius: 20rpx 20rpx 0 0;
  }

  .swiper-item .title {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    color: #333;
    padding: 10rpx 20rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

  }
}


</style>